<template>
  <view style="min-height: 100vh;">
    <!-- 背景 -->
    <view class="img-bg"></view>
    <!-- #ifdef MP-WEIXIN -->
    <!-- 顶部导航 -->
    <qmy-custom-navbar :title="'个人资料'" :bacColor="0"></qmy-custom-navbar>
    <!-- #endif -->
    <!-- 绑定资料弹窗 -->
    <uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
    <view class="ping-30" :style="{paddingTop:menuObject.height + menuObject.top +8 + 'px'}">
      <view class="bac-col-f br-20 w-100 flex-dir-col ali-item-cen text-ali-c flex-center mt-30 h-310 pos-rela">
        <uni-id-pages-avatar width="100rpx" height="100rpx"></uni-id-pages-avatar>
        <image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hi.png"
               class="pos-abso hi-img"></image>
        <view class="fs-28 fw-600 mt-10">{{ userInfo.nickname || '未设置' }}</view>
        <view class="fs-24 col-b1 mt-10">点击上传修改头像</view>
      </view>
      <view class="flex-dir-row bac-col-f br-20 ping-30 mt-30 ali-item-cen flex-x-bet mb-30">
        <view class="fs-28 fw-600">主页背景</view>
        <image @click="uploadhomepage" class="user-page-bg br-20" mode="aspectFill"
               :src="userInfo.homepage || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/userpersonBg.jpg'"/>
      </view>
      <view class="mt-30 bac-col-f br-20 ping-30">
        <view @click="openPopup('nickname')" class="pb-30">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">昵称</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">{{ userInfo.nickname || '未设置' }}</view>
        </view>
        <view @click="openGenderPopup" class="ping-30-0 bor-top-f3">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">性别</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">
            {{ userInfo.gender == 0 ? '未知' : (userInfo.gender == 1 ? '男' : (userInfo.gender == 2 ? '女' : '未知')) }}
          </view>
        </view>
        <view @click="openCityPopup" class="ping-30-0 bor-top-f3">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">城市</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">{{ userInfo.city || '未设置' }}</view>
        </view>
        <view @click="bindMobile" class="ping-30-0 bor-top-f3">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">手机号</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">{{ userInfo.mobile || '未设置' }}</view>
        </view>
        <view @click="openBirthdayPopup" class="ping-30-0 bor-top-f3">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">生日</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">{{ userInfo.birthday || '未设置' }}</view>
        </view>
        <view @click="openPopup('signature')" class="pt-30 bor-top-f3">
          <view class="flex-dir-row ali-item-cen flex-x-bet">
            <view class="fs-28 fw-600">签名</view>
            <view class="iconfont ic-you fs-36 col-0"></view>
          </view>
          <view class="fs-26 col-b1 mt-20">{{ userInfo.signature || '未设置' }}</view>
        </view>
      </view>
    </view>
    <!-- 资料修改弹窗 -->
    <uni-popup ref="nickname" type="dialog">
      <uni-popup-dialog mode="input" @confirm="setInformation" inputType="nickname" title="设置昵称"
                        :value="userInfo.nickname" placeholder="请输入要设置的昵称">
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="mobile" type="dialog">
      <uni-popup-dialog mode="input" @confirm="setInformation" inputType="number" title="设置联系方式"
                        :value="userInfo.mobile" placeholder="请输入您的手机号">
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="signature" type="dialog">
      <uni-popup-dialog mode="input" @confirm="setInformation" inputType="text" title="设置签名"
                        :value="userInfo.signature" placeholder="请设置您的个性签名吧">
      </uni-popup-dialog>
    </uni-popup>
    <!-- 性别选择弹窗 -->
    <uni-popup ref="genderPopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
      <view class="slanted-rectangles br-30 pt-10 flex-dir-col ali-item-cen">
        <picker-view indicator-style="height: 50px;" :value="genderArr" @change="onGenderChange"
                     class="picker-view" style="height: 250rpx;">
          <picker-view-column>
            <view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in list" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
        <view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-20 text-ali-c fs-26">
          <view @click="cancelGender" class="border-bf col-87 br-20 gender-btn">取消</view>
          <view @click="confirmGender" class="bac-col-00b col-f br-20 gender-btn">确定</view>
        </view>
      </view>
    </uni-popup>
    <!-- 生日选择弹窗 -->
    <uni-popup ref="birthdayPopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
      <view class="slanted-rectangle br-30 pt-30 flex-dir-col ali-item-cen">
        <picker-view indicator-style="height: 50px;" :value="birthdayArr" @change="onBirthdayChange"
                     class="picker-view">
          <picker-view-column>
            <view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in years" :key="index">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in months" :key="index">
              {{ item }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in days" :key="index">
              {{ item }}日
            </view>
          </picker-view-column>
        </picker-view>
        <view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-30 text-ali-c fs-26">
          <view @click="cancelBirthday" class="border-bf col-87 br-20 gender-btn">取消</view>
          <view @click="confirmBirthday" class="bac-col-00b col-f br-20 gender-btn">确定</view>
        </view>
      </view>
    </uni-popup>
    <!-- 城市选择 -->
    <unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false"
                          @select="select"></unicloud-city-select>
  </view>
</template>

<script>
import {
  store,
  mutations
} from '@/utils/store.js'

export default {
  data() {
    const date = new Date()
    const years = []
    const year = date.getFullYear()
    const months = []
    const month = date.getMonth() + 1
    const days = []
    const day = date.getDate()
    for (let i = 1000; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    return {
      // #ifdef MP-WEIXIN
      menuObject: uni.getMenuButtonBoundingClientRect(),
      // #endif
      // #ifndef MP-WEIXIN
      menuObject: 0,
      // #endif
      popupState: 'nickname',
      popupTitle: '设置昵称',
      popupPlaceholder: '请输入要设置的昵称',
      list: ['未知', '男', '女'],
      genderArr: [0],
      genderIndex: 0,
      birthdayArr: [9999, month, day],
      dialogValue: '',
      years,
      year,
      months,
      month,
      days,
      day,
      // 热门城市
      hotCity: [{
        code: "000000",
        name: "全国"
      },
        {
          code: "310100",
          name: "上海"
        },
        {
          code: "330100",
          name: "杭州"
        },
        {
          code: "440100",
          name: "广州"
        },
        {
          code: "440300",
          name: "深圳"
        },
        {
          code: "320100",
          name: "南京"
        },
        {
          code: "500100",
          name: "重庆"
        },
        {
          code: "510100",
          name: "成都"
        }
      ],
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    // 打开修改资料弹窗
    openPopup(state) {
      this.popupState = state;
      this.$nextTick(() => {
        this.$refs[state].open();
      })
    },
    bindMobile() {
      // #ifdef MP-WEIXIN
      this.$refs['bind-mobile-by-sms'].open()
      // #endif

      // #ifdef H5
      //...去用验证码绑定
      this.bindMobileBySmsCode()
      // #endif
    },
    bindMobileSuccess() {
      mutations.updateUserInfo()
    },
    setInformation(e) {
      switch (this.popupState) {
        case 'nickname':
          // 校验昵称：1-10位字符
          if (e.length < 1 || e.length > 10) {
            this.$Toast('昵称格式不正确，昵称必须是1-10个字符', 'none', 2200);
          } else {
            mutations.updateUserInfo({
              nickname: e
            })
          }
          break;

        case 'mobile':
          // 校验手机号：11位数字，符合手机号格式
          const mobileReg = /^1[3-9]\d{9}$/; // 简单的手机号格式校验
          if (!mobileReg.test(Number(e))) {
            this.$Toast('手机号格式不正确，请输入有效的手机号', 'none', 2200);
          } else {
            mutations.updateUserInfo({
              mobile: e
            })
          }
          break;

        case 'signature':
          // 校验签名：1-20个字符
          if (e.length < 1 || e.length > 20) {
            this.$Toast('签名必须在1-20个字符之间', 'none', 2200);
          } else {
            mutations.updateUserInfo({
              id: store.userInfo.id,
              signature: e
            })
          }
          break;

        default:
          break;
      }
    },
    // 上传背景图
    uploadhomepage(res) {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed "],
        success: async (res) => {
          let filePath = res.tempFilePaths[0]

          let cloudPath = this.userInfo.id + '' + Date.now()
          uni.showLoading({
            title: "更新中",
            mask: true
          });
          // 使用自定义上传方法
          const {upload} = require('@/utils/request.js')
          const uploadResult = await upload('/api/upload/homepage', {
            file: filePath
          });
          uni.hideLoading()
          mutations.updateUserInfo({
            homepage: uploadResult.data.url
          })
        }
      })
    },
    // 打开性别选择弹窗
    openGenderPopup() {
      this.$refs.genderPopup.open();
    },

    // 关闭性别选择弹窗
    closeGenderPopup() {
      this.$refs.genderPopup.close();
    },

    // 确认选择性别
    async confirmGender() {
      // 开始更新
      await mutations.updateUserInfo({
        gender: this.genderIndex
      })
      this.closeGenderPopup();
    },

    // 取消选择关闭性别弹窗
    cancelGender() {
      this.closeGenderPopup();
    },

    // 更新性别索引
    onGenderChange(e) {
      this.genderIndex = e.detail.value[0];
    },

    // 打开生日选择弹窗
    openBirthdayPopup() {
      this.$refs.birthdayPopup.open();
    },

    // 关闭生日选择弹窗
    closeBirthdayPopup() {
      this.$refs.birthdayPopup.close();
    },

    // 确认选择生日
    async confirmBirthday() {
      const birthday = this.year + '-' + this.month + '-' + this.day
      // 开始更新
      await mutations.updateUserInfo({
        birthday
      })
      this.closeBirthdayPopup();
    },

    // 取消选择关闭生日弹窗
    cancelBirthday() {
      this.closeBirthdayPopup();
    },

    // 更新生日索引
    onBirthdayChange(e) {
      this.year = this.years[e.detail.value[0]]
      this.month = this.months[e.detail.value[1]]
      this.day = this.days[e.detail.value[2]]
    },
    async select(e) {
      // 开始更新
      await mutations.updateUserInfo({
        city: e.name
      })
    },
    openCityPopup() {
      this.$refs.citySelect.open();
    }
  }
}
</script>

<style lang="scss">
.img-bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%), url('https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/pagea-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(10px);
}


.user-avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}

.user-page-bg {
  width: 110rpx;
  height: 110rpx;
}

.hi-img {
  width: 180rpx;
  height: 100rpx;
  top: -30rpx;
  left: 35rpx;
}

.picker-view {
  width: 750rpx;
  height: 350rpx;
  margin-top: 20rpx;
}

.gender-btn {
  width: 270rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.slanted-rectangle {
  position: relative;
  width: 100%;
  background-color: white;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding-bottom: 20rpx;
  bottom: -20rpx;
  z-index: 2;
}

.slanted-rectangle::before {
  content: '';
  position: absolute;
  top: -55rpx;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: white;
  transform: skewY(3deg);
  border-radius: 40rpx 40rpx 0 0;
}

.slanted-rectangles {
  position: relative;
  width: 100%;
  background-color: white;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding-bottom: 20rpx;
  bottom: -20rpx;
  z-index: 2;
}

.slanted-rectangles::before {
  content: '';
  position: absolute;
  top: -46rpx;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: white;
  transform: skewY(3deg);
  border-radius: 40rpx 40rpx 0 0;
}
</style>
